<template>
	<view class="container">
    <view class="box" v-if="isLoad&&list.length">
      <template v-for="(item,index) in list">
        <view v-if="item.length" :key="index">
          <view class="h2">{{typeList[index]}}：</view>
          <view class="picList">
            <view
              class="li"
              v-for="(mitem,mindex) in item"
              :key="mindex"
              @click="ViewImage(mindex,item)"
            >
              <image :src="mitem" />
            </view>
          </view>
        </view>
      </template>
    </view>
    <empty v-else tips="暂无照片"></empty>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
        typeList:['工作服','门牌号','房间场景','维修前','维修后'],
        list:[],
        isLoad:false
			}
		},
    onLoad(options) {
      const orderId = options.orderId || '1587'
      this.$apis.getApi('/order/img',{orderId}).then(({code,result})=>{
        if(code==200&&result.length){
          this.isLoad = true
          const arr1 = [], arr2 = [], arr3 = [], arr4 = [], arr5 = []
          result.map(item=>{
            if(item.imgType==1){
              arr1.push(item.imageUrl)
            }else if(item.imgType==2){
              arr2.push(item.imageUrl)
            }else if(item.imgType==3){
              arr3.push(item.imageUrl)
            }else if(item.imgType==4){
              arr4.push(item.imageUrl)
            }else if(item.imgType==5){
              arr5.push(item.imageUrl)
            }
          })
          this.list = [
            arr1,
            arr2,
            arr3,
            arr4,
            arr5
          ]
        }
      })
    },
    methods: {
      ViewImage(index, arr) {
				uni.previewImage({
					current: index,
					urls: arr
				})
			},
    },
	}
</script>

<style scoped lang="scss">
.container{
  .box{
    border-radius: 16upx;
    background: #fff;
    margin: 20upx $page-row-spacing;
    padding-bottom: 40upx;
  }
}
.h2{
  font-weight: bold;
  font-size: 30upx;
  padding: 22upx 20upx 10upx;
}
.picList{
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 20upx;
  .li{
    width: 33.3%;
  }
  image{
    width: 202upx;
    height: 202upx;
    border-radius: 8upx;
    background: #f2f2f2;
    display: block;
    margin: 20upx auto;
  }
}
</style>
